<!-- 收支记录 -->
<template>
	<view class="container">
		<u-navbar autoBack title="收支记录" :fixed='true' :titleStyle="{fontSize:'40rpx'}" leftIconSize="46rpx"
			placeholder></u-navbar>
		<view class="list_wrap pd32">
			<view class="list" v-for="(item,i) in dataList" :key="'1'+i">
				<view class="left">
					<view class="title">{{item.description}}</view>
					<view class="time">{{item.created_at}}</view>
				</view>
				<!-- type 类型：1-收入, 2-消费，3-充值 -->
				<view class="right">{{item.type == 2 ? '-' : '+'}}{{item.coins}}</view>
			</view>

			<template v-if="dataList.length === 0 && !isLoading">
				<view style="margin-top: 100rpx;">
					<u-empty :show="true" textColor="#999" :text="loadTxt" icon="/static/data.png">
					</u-empty>
				</view>
			</template>
			<template v-else>
				<uloading :loadTxt="loadTxt" :isLoading="isLoading" />
			</template>
		</view>
	</view>
</template>

<script>
	import {
		coinLogs
	} from "@/api/user.js"
	export default {
		data() {
			return {
				page_size: 10,
				page: 1,
				dataList: [],
				isLoading: true,
				loadTxt: '正在加载...',
			}
		},
		onLoad() {
			this.reqList()
		},
		methods: {
			/**
			 * type 类型：1-收入, 2-消费，3-充值
			 */
			async reqList() {
				const result = await coinLogs({
					page_size: this.page_size,
					page: this.page
				}).catch((error) => {
					console.log('error', error)
					this.loadTxt = '暂无数据'
				})
				this.isLoading = false
				const datas = result && result.data && result.data.items || []

				if (datas && datas.length) {
					this.dataList = [...this.dataList, ...datas]
					if (this.dataList.length < result.data.total_count) {
						this.loadTxt = '上拉加载更多'
					} else {
						this.loadTxt = '无更多数据'
					}
				} else {
					this.loadTxt = this.dataList.length ? "无更多数据" : "暂无数据"
				}
			},

			async refresh() {
				this.page = 1
				this.loadTxt = '正在加载...'
				this.isLoading = true
				this.dataList.status = "empty"
				this.dataList = []
				await this.reqList()
			},

			// async onPullDownRefresh() {
			// 	await this.refresh()
			// 	uni.stopPullDownRefresh()
			// 	uni.showToast({
			// 		title: "刷新成功",
			// 		icon: "none"
			// 	})
			// },

			onReachBottom() {
				console.log('触底')
				this.page++
				this.isLoading = true
				this.loadTxt = '正在加载...'
				this.reqList()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		height: 100%;

		.list_wrap {
			.list {
				background: #FFFFFF;
				box-shadow: 0px 8rpx 26rpx 14rpx rgba(232, 232, 232, 0.25);
				border-radius: 20rpx;
				padding: 24rpx;
				display: flex;
				align-items: center;
				margin-bottom: 24rpx;

				.left {
					flex: 1;

					.title {
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #3A3A3A;
						margin-bottom: 16rpx;
					}

					.time {
						font-size: 20rpx;
						font-family: DIN-Medium, DIN;
						font-weight: 500;
						color: #7A7A7A;
					}
				}
			}
		}
	}
</style>